<template>
  <el-dialog
    v-model="centerDialogVisible"
    title="添加资源信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="menuForm"
      :rules="rules"
      label-width="120px"
      :status-icon="true"
    >

      <el-form-item label="父节点" prop="parentId">
        <el-select v-model="menuForm.parentId" filterable placeholder="请选择">
        <el-option
          v-for="item in menus"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
        <!-- <el-input v-model="menuForm.parentId"></el-input> -->
      </el-form-item>
      <el-form-item label="资源名称" prop="name">
        <el-input v-model="menuForm.name"></el-input>
      </el-form-item>
      <el-form-item label="权限控制url" prop="url">
        <el-input v-model="menuForm.url"></el-input>
      </el-form-item>
      <el-form-item label="路由路径" prop="path">
        <el-input v-model="menuForm.path"></el-input>
      </el-form-item>
      <el-form-item label="组件名称" prop="component">
        <el-input v-model="menuForm.component"></el-input>
      </el-form-item>
    
      <el-form-item label="资源图标" prop="iconCls">
        <el-input v-model="menuForm.iconCls"></el-input>
      </el-form-item>
       
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
         <el-button @click="() => {  closeDialog(false); } ">取消</el-button>

        
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs ,onMounted} from "vue";
import { ElMessage } from "element-plus";
 import {postRequest,getRequest} from '../../../utils/api'


function menuAdd(state, validateForm, emit) {
  const submitForm = () => {
    validateForm.value.validate((valid) => {

     if (valid) {
          postRequest("/system/cfg/list/", state.menuForm).then((res) => {
            
            if(res.code==200){
               const d = res.data 
              validateForm.value.resetFields();
              emit("onCloseDialog", false, d);
            }else{
             
              ElMessage({
                showClose: true,
                message: `${res.message}`,
                type: "error",
              });
            }
          
        });
      }
    });
  };
  return { submitForm };
}
function load2LayerMenu(state) {
  getRequest("/system/cfg/layerMenus").then((res) => {
    if(res && res.code==200){
      state.menus = res.data;
    }else{
      ElNotification({
                        type:"error",
                        title:'失败',
                        message:"查询失败",
                        duration:2000
                      });
    }
   
   
  });
}
export default {
  components: {},
  props: {
    centerDialogVisible:Boolean
  },
  setup(props, { emit }) {
    const validateForm = ref();
    const state = reactive({
      centerDialogVisible: props.centerDialogVisible,
      menus: [],
      headers: { Authorization: window.sessionStorage.getItem("token") },
      menuForm: {
        name: "",
        parentId:1,
        url: "",
        path: "/",
        components: "",
        iconCls: "",
        enabled:true,
        requireAuth:true
       
      },
     
      editorOption: {},
      content: "<h1>Some initial content</h1>",
    });

    const rules = {
      name: [{ required: true, message: "请输入资源名", trigger: "blur" }],
      url: [{ required: true, message: "请输入访问url", trigger: "blur" }],
      path: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
      components: [{ required: true, message: "请输入组件名称", trigger: "blur" }],
       
      //自动以邮箱校验规则
      // email:[{required: true, message: "请输入邮箱", trigger: "blur"}, 
      //   {validator:userCheckMail().checkMail,trigger:"blur"} ]
    };

    const closeDialog = (visible, data) => {
      validateForm.value.resetFields();
      emit("onCloseDialog", visible, data);

    };


    const handleBeforeUpload = (file) => {
      const name = file.name.split(".")[1];
      if (!["jpg", "jpeg", "png"].includes(name)) {
        ElMessage({
          showClose: true,
          message: "请上传jpg,jpeg,png对应的图片文件",
          type: "error",
        });
        return false;
      }

      return true;
    };

    onMounted(()=>{
      load2LayerMenu(state)
    })

    return {
      state,
      ...toRefs(state),
      closeDialog,
      rules,
      ...menuAdd(state, validateForm, emit), //解构goodsAdd返回的结果  返回submitAdd对象函数 需要把富文本编辑器也传过去 这里省略了
      validateForm,
      handleBeforeUpload,
    };
  },
};
</script>

<style>
.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>